<html>
<head>
<link href="css/qam.css" rel="stylesheet" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>


<div id="config_box"></div>

<div id="code_box">
	<div class="hd"><h3>code面板</h3><div class="hd_extra"><a href="javascript:" onClick="box_close('code_box')">X</a></div></div>
	<div style="padding:10px;background:#E8E8FF;margin-top:10px;" id="listbox_frame"></div>
	<div style="padding:10px;background:#E8E8FF;margin-top:10px;" id="listbox_module"></div>
	<div style="padding:10px;background:#E8E8FF;margin-top:10px;" id="listbox_component"></div>
</div>

<div id="parm_box">
	<div class="inner">
		<div class="hd"><h3>参数配置</h3><div class="hd_extra"><a href="javascript:" onClick="box_close('parm_box')">X</a></div></div>
		<div class="bd" id="parm_box_bd"></div>
	</div>
</div>

<div id="dom_box">
	<div id="dom_tree"></div>
	<div id="dom_button">
    	<a href="javascript:void(0)" onClick="search_switch();">定位元素</a>
		<a href="javascript:void(0)" onClick="mask_switch();">浮层切换</a>
		<a href="javascript:void(0)" onClick="page_reset();">还原</a>
		<a href="javascript:void(0)" onClick="page_save();">保存</a>
	</div>
</div>
<div id="config_mask"><div id="mask_tip"></div></div>
</body>

<script>
var $$=function(id){return document.getElementById(id);}
var parm=window.location.href.split("?")[1].replace("#","");
var obj_current;
var code_times=0;
function read(){

	var _url=cgipath+"page-read";
	var ajax_obj=new AJAX_OBJ(_url,function(xmlHttp){
		eval("var ret_json="+xmlHttp.responseText);
		console.log(ret_json);
		code_times=ret_json.times*1+1;
		for(var i=0;i<ret_json.css.length;i++){
			var css_link = document.createElement("link");
            css_link.setAttribute("type", "text/css");
            css_link.setAttribute("rel", "stylesheet");
            css_link.setAttribute("href",cgipath+ret_json.css[i]);
            document.getElementsByTagName("head")[0].appendChild(css_link);

		}
		$$("config_box").innerHTML=ret_json.content;
		
		dom_reset("0");
	},handle_error,5000);
	ajax_obj.postData("&id="+parm);
}

/*****codebox 面板开关*******/
function code_box_show(){
	$$("code_box").style.display="block";
}

function code_box_show(){
	$$("code_box").style.display="block";
}

/*****获取code的参数配置 未配置********/
function pick_parm(t){
	var _url=cgipath+"pick-parm";
	var ajax_obj=new AJAX_OBJ(_url,handle_pick_parm,handle_error,5000);
	ajax_obj.postData("&code_id="+t);
}
function handle_pick_parm(xmlHttp){
	
	//$$("message").innerHTML=xmlHttp.responseText;return;
	$$("parm_box").style.display="block";
	eval("var ret_json="+xmlHttp.responseText);
	var str="";
	console.log(ret_json);
	str+="<h3>code信息</h3><input type=hidden  id=\"id\" value=\""+ret_json.codeinfo.id+"\" />";
	str+="<div>名称："+ret_json.codeinfo.name+"&emsp;&emsp;标识："+ret_json.codeinfo.ident+"</div>";
	str+="<div>说明："+ret_json.codeinfo.info+"</div>";
	str+="<h3>参数</h3>";
	//str+="<div><span class=\"name\">类名</span>：<input type=text  id=\"pick_ident\" value=\""+ret_json.codeinfo.class_name+"\" />"+"说明：唯一标识本代码的类名&nbsp;<span id=\"ident_check\"></span></div>";
	for(var i=0;i<ret_json.listdata.length;i++){
		str+="<div><b>"+ret_json.listdata[i].group_name+"</b><hr>";
		for(var j=0;j<ret_json.listdata[i].group_list.length;j++){
			str+="<div>";
			if(ret_json.listdata[i].group_list[j].group_dependent==1)
				str+="<span class=\"name\">我罩着下面</span>";
			else
				str+="<span class=\"name\"></span>";
			str+="<span class=\"name\">"+ret_json.listdata[i].group_list[j].name+"</span>：<input type=text id=\"pick_"+ret_json.listdata[i].group_list[j].id+"\" value=\""+ret_json.listdata[i].group_list[j].value+"\" />";
			if(ret_json.listdata[i].group_list[j].pick_value_type==1)str+="我是color";
			else if(ret_json.listdata[i].group_list[j].pick_value_type==2)str+="我是bool";
			else if(ret_json.listdata[i].group_list[j].pick_value_type==3)str+="我是px";
			str+="</div>";
		}
		
	}
	str+="<div><a class=\"button\" href=\"javascript:void(0)\" onclick=\"box_close('parm_box')\">取消</a><a class=\"button\" href=\"javascript:void(0)\" onclick=\"code_request(0)\">替换代码</a><a class=\"button\" href=\"javascript:void(0)\" onclick=\"code_request(1)\">追加代码</a></div>";
	$$("parm_box_bd").innerHTML=str;	
}



/*****获取code的参数配置 已配置********/
function css_reset(t){
	str="&ident="+t+"&page_id="+parm;

	var _url=cgipath+"code-cssReset";
	var ajax_obj=new AJAX_OBJ(_url,function(xmlHttp){
		eval("var ret_json="+xmlHttp.responseText);
			if(ret_json.ret==0){
				var style_id_temp=obj_current.className.replace(/^.*_/,"");
				style_id_temp="s_"+style_id_temp;
				html_dom_find_by_style(style_id_temp).innerHTML=ret_json.css;
			}
	},handle_error,5000);
	ajax_obj.postData(str);
}



function pick_parm_yet(ident,code_id){
	var _url=cgipath+"pick-parmYet";
	var ajax_obj=new AJAX_OBJ(_url,handle_pick_parm_yet,handle_error,5000);
	ajax_obj.postData("&page_id="+parm+"&ident="+ident+"&code_id="+code_id);
}
function handle_pick_parm_yet(xmlHttp){
	//$$("message").innerHTML=xmlHttp.responseText;return;
	$$("parm_box").style.display="block";
	eval("var ret_json="+xmlHttp.responseText);
	var str="";
	str+="<h3>code信息</h3><input type=hidden  id=\"id\" value=\""+ret_json.codeinfo.id+"\" />";
	str+="<input type=\"hidden\" id=\"ident\" value=\""+obj_current.className+"\" />";
	str+="<div>名称："+ret_json.codeinfo.name+"&emsp;&emsp;标识："+ret_json.codeinfo.ident+"</div>";
	str+="<div>说明："+ret_json.codeinfo.info+"</div>";
	str+="<h3>参数</h3>";
	//str+="<div><span class=\"name\">类名</span>：<input type=text  id=\"pick_ident\" value=\""+ret_json.codeinfo.class_name+"\" />"+"说明：唯一标识本代码的类名&nbsp;<span id=\"ident_check\"></span></div>";
	for(var i=0;i<ret_json.listdata.length;i++){
		str+="<div><b>"+ret_json.listdata[i].group_name+"</b><hr>";
		for(var j=0;j<ret_json.listdata[i].group_list.length;j++){
			str+="<div>";
			if(ret_json.listdata[i].group_list[j].group_dependent==1)
				str+="<span class=\"name\">我罩着下面</span>";
			else
				str+="<span class=\"name\"></span>";
			str+="<span class=\"name\">"+ret_json.listdata[i].group_list[j].name+"</span>：<input type=text id=\"pick_"+ret_json.listdata[i].group_list[j].id+"\" value=\""+ret_json.listdata[i].group_list[j].value+"\" />";
			if(ret_json.listdata[i].group_list[j].pick_value_type==1)str+="我是color";
			else if(ret_json.listdata[i].group_list[j].pick_value_type==2)str+="我是bool";
			else if(ret_json.listdata[i].group_list[j].pick_value_type==3)str+="我是px";
			str+="</div>";
		}
		
	}
	str+="<div><a class=\"button\" href=\"javascript:void(0)\" onclick=\"box_close('parm_box')\">取消</a><a class=\"button\" href=\"javascript:void(0)\" onclick=\"css_request()\">保存</a></div>";
	$$("parm_box_bd").innerHTML=str;	
}

function code_request(t){
	var obj=$$("parm_box");
	var input_obj=obj.getElementsByTagName("input");
	var str="";
	str+="&thumb_flag=1&page_id="+parm;
	for(var i=0;i<input_obj.length;i++){
		str+="&"+input_obj[i].id.replace("pick_","")+"="+encodeURIComponent(input_obj[i].value);
	}

	var _url=cgipath+"code-request";
	var ajax_obj=new AJAX_OBJ(_url,function(xmlHttp){
		eval("var ret_json="+xmlHttp.responseText);
			console.log(ret_json);
			if(ret_json.ret==0){
				var style_id_temp=obj_current.className.replace(/^.*_/,"");
				style_id_temp="s_"+style_id_temp;
				
				if(t==0){
					//obj_current.outerHTML=ret_json.content;
					var oNewDiv = document.createElement("div");
					oNewDiv.innerHTML = ret_json.content;
					obj_current.parentNode.replaceChild(oNewDiv,obj_current);
				}
				else if(t==1)
					obj_current.innerHTML=obj_current.innerHTML+ret_json.content;
				
				box_close("parm_box");
				
				//给父元素设置insert_flag
				insert_flag_set(obj_current);
				
				dom_reset(obj_current.getAttribute("config_id"));
			}
			else if(ret_json.ret==2){
				$$("ident_check").innerHTML="类名重复!"
			}
	},handle_error,5000);
	ajax_obj.postData(str);
}


function code_immediate(type,index){
	var code;
	var code_id;
	var type;
	var code_ident="";
	switch(type){
		case 0:
			code=frame_list[index].code;
			code_id=frame_list[index].id;
			code_ident=frame_list[index].prefix+code_times;
			break;
		case 1:
			code=module_list[index].code;
			code_id=module_list[index].id;
			code_ident=module_list[index].prefix+code_times;
			break;
		case 2:
			code=comment_list[index].code;
			code_id=comment_list[index].id;
			code_ident=comment_list[index].prefix+code_times;
			break;
			
	}
	code_times++;
	var str="<div class=\""+code_ident+"\" code_type=\""+type+"\" code_id=\""+code_id+"\">";
	str+=code;
	obj_current.innerHTML=obj_current.innerHTML+str;

}

function css_request(){
	var obj=$$("parm_box");
	var input_obj=obj.getElementsByTagName("input");
	var str="";
	str+="&page_id="+parm;
	for(var i=0;i<input_obj.length;i++){
		str+="&"+input_obj[i].id.replace("pick_","")+"="+encodeURIComponent(input_obj[i].value);
	}

	var _url=cgipath+"code-request";
	var ajax_obj=new AJAX_OBJ(_url,function(xmlHttp){
		eval("var ret_json="+xmlHttp.responseText);
			if(ret_json.ret==0){
				var style_id_temp=obj_current.className.replace(/^.*_/,"");
				style_id_temp="s_"+style_id_temp;
				
				//只替换css
				html_dom_find_by_style(style_id_temp).innerHTML=ret_json.css;
				box_close("parm_box");
				//给父元素设置insert_flag
				insert_flag_set(obj_current);
				
				dom_reset(obj_current.getAttribute("config_id"));
			}
			else if(ret_json.ret==2){
				$$("ident_check").innerHTML="类名重复!"
			}
	},handle_error,5000);
	ajax_obj.postData(str);
}


function code_del(t){
	var root=$$("config_box");
	html_dom_find_by_configid(t,root);
	obj_current.outerHTML="";
	dom_reset("0");
}

/*****页面操作********/
function page_reset(){
	history.go(0);
}

function page_save(){
	var _url=cgipath+"page-save";
	var str="&page_id="+parm+"&html="+encodeURIComponent($$("config_box").innerHTML);
	var ajax_obj=new AJAX_OBJ(_url,function(xmlHttp){
		//alert(xmlHttp.responseText);return;
		eval("var ret_json="+xmlHttp.responseText);
		if(ret_json.ret==0){
			alert("保存成功");
		}
		else{
			alert("保存失败");
		}
	},handle_error,5000);
	ajax_obj.postData(str);
}

/*****解析得到dom树********/
function dom_reset(config_id){
	var root=$$("config_box");
	html_dom_find_by_configid(config_id,root);
	parse_html(obj_current);
	dom_mask(obj_current);
}


function dom_mask(obj){
	$$("config_mask").style.width=obj.offsetWidth;
	$$("config_mask").style.height=obj.offsetHeight;
	$$("config_mask").style.top=obj.offsetTop;
	$$("config_mask").style.left=obj.offsetLeft;
	var str="["+obj.offsetWidth+"X"+obj.offsetHeight+"]";
	str+="<a href=\"javascript:void(0)\" onclick=\"css_reset('"+obj.getAttribute("class")+"')\" class=\"button\">重置样式</a>";
	
	if(obj.getAttribute("code_type")!=null && obj.getAttribute("code_type")!="-1")str+="<a href=\"javascript:void(0)\" onclick=\"pick_parm_yet('"+obj.getAttribute("class")+"','"+obj.getAttribute("code_id")+"')\" class=\"button\">配置参数</a>";
	
	if(obj.getAttribute("config_id")!=null && obj.getAttribute("code_type")!="-1"){
		str+="<a href=\"javascript:void(0)\" onclick=\"code_del('"+obj.getAttribute("config_id")+"')\" class=\"button\">删除</a>";
	}
	
	var code_type_now=obj_parent_attr(obj);
	//组件不允许再编辑
	if(obj.getAttribute("config_id")!=null && code_type_now!=2){
		str+="<a href=\"javascript:void(0)\" onclick=\"box_show('code_box')\" class=\"button\">插入代码</a>"
	}
	$$("mask_tip").innerHTML=str;
}


//查找obj parent的code_type
function obj_parent_attr(obj){
	var ret;
	var find_flag=false;
	
	if(obj.getAttribute("code_type")!=null){
		ret=obj.getAttribute("code_type");
		find_flag=true;
	}
	
	var obj_temp=obj.parentNode;
	while(!find_flag){
		if(obj_temp.getAttribute("code_type")!=null){
			ret=obj_temp.getAttribute("code_type");
			find_flag=true;
			break
		}
		else{
			obj_temp=obj_temp.parentNode;
		}
	}
	return(ret);
}

//给父元素添加insert_flag
function insert_flag_set(obj){
	var find_flag=false;

	if(obj.getAttribute("code_type")!=null){
		obj.setAttribute("insert_flag",1)
		find_flag=true;
	}
	
	var obj_temp=obj.parentNode;
	while(!find_flag){
		if(obj_temp.getAttribute("code_type")!=null){
			obj_temp.setAttribute("insert_flag",1)
			find_flag=true;
			break
		}
		else{
			obj_temp=obj_temp.parentNode;
		}
	}
}

function parse_html(obj){
	var root=$$("config_box");
	html_dom_tree_set(root,0);
	
	dom_tree_parent=[];
	html_dom_tree_get_parent(obj);
	
	var str="<a class=\"root\">ROOT</a>"
	var dom_tree_parent2=dom_tree_parent.reverse();
	for(var i=0;i<dom_tree_parent2.length;i++){
		eval("var dom_json="+dom_tree_parent2[i]);
		var class_str="";
		if(i==dom_tree_parent2.length-1){class_str+="current"}		
		str+="<a href=\"javascript:void(0)\" onclick=\"dom_reset('"+dom_json.config_id+"')\" class=\""+class_str+"\">"+dom_json.container+"</a>";
	}
	
	var dom_list=html_dom_tree_get_child(obj);
	
	var str_child="";
	for(var i=0;i<dom_list.length;i++){
		eval("var dom_json="+dom_list[i]);
		str_child+="<a href=\"javascript:void(0)\" onclick=\"dom_reset('"+dom_json.config_id+"')\"  class=\"child\">"+dom_json.container+"</a>";
	}
	str+=str_child;
	$$("dom_tree").innerHTML=str;
}

//给所有节点分配标识与事件
/*
nodetype:
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9
*/
function html_dom_tree_set(obj){
	for(var i=0;i<obj.childNodes.length;i++){
		var config_id="cfg_"+parseInt(10000000*Math.random());
		if(obj.childNodes[i].nodeType==1 && obj.childNodes[i].getAttribute("config_id")==null && obj.childNodes[i].nodeName!="STYLE" && obj.childNodes[i].nodeName!="SCRIPT")
			obj.childNodes[i].setAttribute("config_id", config_id);
			
		if(obj.childNodes[i].childNodes.length>0){
			html_dom_tree_set(obj.childNodes[i])
		}
	}
}
//获取当前节点下的div
function html_dom_tree_get_child(obj){
	var ret=[];
	var ret_index=0;
	for(var i=0;i<obj.childNodes.length;i++){
		if(obj.childNodes[i].nodeType==1  && obj.childNodes[i].nodeName!="STYLE" && obj.childNodes[i].nodeName!="SCRIPT"){
			var attr=obj.childNodes[i].getAttribute("config_id");
			var nodename=obj.childNodes[i].nodeName.toLowerCase();
			if(obj.childNodes[i].id!=null  && obj.childNodes[i].id!="" )nodename+="#"+obj.childNodes[i].id;
			if(obj.childNodes[i].className!=null  && obj.childNodes[i].className!="" )nodename+="."+obj.childNodes[i].className;
			ret[ret_index]='{"config_id":"'+attr+'","container":"'+nodename+'"}';
			ret_index++;
		}
	}
	return ret;
}

//根据config_id查找node
function html_dom_find_by_configid(config_id,obj){
	if(config_id=="0"){
		obj_current=obj.childNodes[0];
		return;
	}
	for(var i=0;i<obj.childNodes.length;i++){
		if(obj.childNodes[i].nodeType==1  && obj.childNodes[i].nodeName!="STYLE" && obj.childNodes[i].nodeName!="SCRIPT"){
			var attr=obj.childNodes[i].getAttribute("config_id");
			if(attr==config_id){obj_current=obj.childNodes[i];return;}
			html_dom_find_by_configid(config_id,obj.childNodes[i]);
		}
	}
}

//根据style_id查找node

function html_dom_find_by_style(style_id){
	var style_arr=document.getElementById('config_box').getElementsByTagName("style");
	var ret;
	for(var i=0;i<style_arr.length;i++){
		if(style_arr[i].getAttribute("style_id")==style_id){
			ret=style_arr[i];
			break;
		}
	}
	return ret;
}

//获取当前节点的父树，找到config_box为止
var dom_tree_parent=[];
function html_dom_tree_get_parent(obj){
	var attr=obj.getAttribute("config_id");
	var nodename=obj.nodeName.toLowerCase();
	if(obj.id!=null  && obj.id!="" )nodename+="#"+obj.id;
	if(obj.className!=null  && obj.className!="" )nodename+="."+obj.className;
	dom_tree_parent.push('{"config_id":"'+attr+'","container":"'+nodename+'"}');
	if(obj.parentNode.getAttribute("id")!="config_box")html_dom_tree_get_parent(obj.parentNode);
}


function box_close(t){$$(t).style.display="none";}
function box_show(t){$$(t).style.display="block";}
function mask_switch(){$$("config_mask").style.display=($$("config_mask").style.display=="none")?"block":"none";}
function init(){
	load_project_list();
	read();
}
</script>
<script src="js/public.js" type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<script src="js/function.js" type="text/javascript"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/list.js" type="text/javascript"></script>

<!--  放大镜功能——定位元素  -->
<script src="js/search_element.js" type="text/javascript"></script>
</html>






